<script setup>
import { getGood } from "@/api/visual/index.js";
import { $formatechartData, fontSize } from "@/utils/globalMethod.js";

const key = ref(1);
const goodData = ref([]);
const option = computed(() => ({
  title: {
    text: "产品类别",
    textStyle: {
      color: "#fff",
      fontSize: fontSize(0.16),
    },
  },

  legend: {
    itemHeight: 4,
    itemWidth: 6,
    top: 30,
    orient: "vertical",
    left: "left",
    textStyle: {
      color: "#fff",
      fontSize: fontSize(0.12),
    },
  },
  // 数据
  series: [
    {
      name: "产品类别",
      type: "pie",
      radius: "60%",
      data: goodData.value,
      right: "-40%",
      labelLine: {
        length: 6,
      },

      // 设置label提示的样式
      label: {
        color: "#fff",
        formatter: "{d}%",
        fontSize: fontSize(0.12),
      },
    },
  ],
}));

const loadData = async () => {
  const { data } = await getGood();

  goodData.value = $formatechartData(data, "ClassName", "hsje", 8);
};

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++;
    }, 100);
  });
};

onMounted(loadData);
onMounted(() => {
  window.addEventListener("resize", keyResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", keyResize);
});
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box13 class="ps_pd10" :key="key">
      <ps-chart2 :option="option"></ps-chart2>
    </dv-border-box13>
  </div>
</template>

<style scoped lang="scss"></style>
